<template>
<div @click.stop>
    <el-dialog
        class="add-no-defined-website"
        title="网站添加" 
        :visible.sync="show" 
        append-to-body
        top="20vh"
        width="500px">
        <div class="container">
            <div class="website">
                <el-image
                    class="border-radius_1"
                    :src="website.icon"
                    fit="cover">
                    <div slot="error">
                    </div>
                </el-image>
                <div class="container">
                    {{website.name}}
                    <div class="link" @click="toLink">
                        {{website.link}}
                    </div>
                </div>
            </div>
            <div class="title title-after">
                将该网站添加到
            </div>
            <TypeSelectInput
                v-model="type">
            </TypeSelectInput>
        </div>
        <div slot="footer">
            <div class="login-bt" v-if="!userData.id" @click="goLogin">
                去登录
            </div>
            <el-button 
                type="primary" 
                @click="onAdd" 
                :loading="loading"
                :disabled="!userData.id">
                添加
            </el-button>
            <el-button 
                type="primary" 
                @click="addUserWebsiteIsDefined" 
                :loading="loadingTwo"
                :disabled="!userData.id">
                添加为自定义
            </el-button>
            <el-button 
                type="primary" 
                @click="copyData" 
                :disabled="!userData.id">
                复制模板
            </el-button>
            <el-button @click="show=false" type="danger" plain>关闭</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
/*
 添加网站
 */
import TypeSelectInput from"@/components/TypeSelectInput";
import {getUserWebsiteTypes} from "@/common/Tools";
import {throttleFn} from '@/common/DebounceAndThrottle';
export default {
    name:"AddNoDefinedWebsite",
    components:{TypeSelectInput},
    data() {
        return {
            loading:false,
            loadingTwo:false,
            show:false,  //控制组件里对话框的显示
            type: '',  //网站所属类型
            website:{},
        };
    },
    watch:{
        show(newValue){  //当组件显示与隐藏时需要做的事
            setTimeout(()=>{ //防止取消锁在全局点击事件前面执行导致隐藏选择组件
                if(newValue){
                    this.type = this.type || this.typeList[0];
                }
                this.$store.commit('public/setSelectWebsiteShowLock',newValue);
            },0);
        },
    },
    computed:{
        typeList(){ //全局添加的网站的所有类型
            return getUserWebsiteTypes(this.userWebsiteList);
        },
        userData(){
            return this.$store.state.user.user;
        },
        userWebsiteList(){  //该登录用户的网址列表
            return this.$store.state.user.userWebsiteList;
        },
        websiteTemplate:{  //全部网址模板
            set(newValue){
                this.$store.commit('public/setWebsiteTemplate',newValue);
            },
            get(){
                return this.$store.state.public.websiteTemplate;
            },
        },
    },
    methods: {
        initData({show=true,data={}}={}){  //写入初始化数据(外部调用)
            this.website = data;
            this.show = show;
        },
        addUserWebsiteIsDefined:throttleFn(function(){ //添加一个自定义网站
            if(!this.type || this.type.length>30){
                this.$message({
                    message:"所属分类长度1-30",
                    offset:55,
                    type:'error',
                });
                return;
            }
            if (this.loadingTwo) return;
            this.loadingTwo = true;
            this.$store.dispatch(
                'user/addUserWebsite',
                {
                    name: this.website.name,
                    link: this.website.link,
                    icon: this.website.icon || '',
                    search:this.website.search || '',
                    content:this.website.content || '',
                    type:this.type,
                },
            ).then(()=>{
                this.$message({
                    message:'添加成功',
                    offset:55,
                    type:'success',
                });
            }).catch((msg) =>{
                this.$message({
                    message:msg,
                    offset:55,
                    type:'error',
                });
            }).finally(()=>{
                this.loadingTwo = false;
                this.show = false;
            });
        },700),
        copyData(){  //网址复制，用于模板
            this.websiteTemplate = this.website;
            this.$message({
                message:'数据已复制，可以到自定义添加网址处去粘贴。',
                offset:55,
                type:'success',
            });
            this.show = false;
        },
        onAdd(){ //添加一个非自定义网站
            if(!this.type || this.type.length>30){
                this.$message({
                    message:"所属分类长度1-30",
                    offset:55,
                    type:'error',
                });
                return;
            }
            if (this.loading) return;
            this.loading = true;
            this.$store.dispatch(
                'user/addUserWebsite',
                {
                    websiteId:this.website.id,
                    type:this.type,
                },
            ).then(()=>{
                this.$message({
                    message:'添加成功',
                    offset:55,
                    type:'success',
                });
            }).catch((msg) =>{
                this.$message({
                    message:msg,
                    offset:55,
                    type:'error',
                });
            }).finally(()=>{
                this.loading = false;
                this.show = false;
            });
        },
        goLogin(){
            this.show = false;
            this.$router.push({ path:'/login'});
        },
        toLink(){
            window.open(this.website.link);
        },
    }
};
</script>
<style lang="scss" scoped>
.add-no-defined-website{
    .container{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: fit-content;
        margin-bottom: 20px;
        >.website{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            >*{
                margin-right: 15px;
            }
            /deep/.el-image{
                width: 35px;
                height: 35px;
                img{
                    width: 35px;
                    height: 35px;
                }
            }
            >.container{
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: 5px;
                text-align: left;
                line-height: 1;
                font-size: 20px;
                font-weight: bold;
                color: #1f2f3d;
                >.link{
                    font-size: 14px;
                    opacity: 0.7;
                    display: inline-block;
                    white-space: nowrap;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    &:hover{
                        color: rgb(0, 94, 255);
                    }
                }
            }
        }
        >.title{
            width: fit-content;
            line-height: 1;
            font-size: 17px;
            color: #1f2f3d;
            font-weight: bold;
            margin-bottom: 20px;
        }
    }
    /deep/.login-bt{
        display: inline;
        font-size: 13px;
        margin-right: 15px;
        color: #007dff;
        cursor: pointer;
    }
    /deep/button{
        padding: 10px 15px;
    }
}
</style>